<html>
<head>
    <meta charset="utf-8"/>
    <title>node.js websocket 聊天室</title>

    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.css" type="text/css"  rel="stylesheet"/>

    <style type="text/css">
        #message{width: 1200px;height: 600px;}              
        #left{float:left;background: #ddd;height: 600px;}               
        .has-newmsg{border-radius:50%;width: 20px;height: 20px;background-color: #c9394a;position: absolute; top: 12px;left: 50px;color:#f9f9f9;line-height: 20px;padding: 0 5px;}
        #left-nav{float:left;width: 80px;height: 600px;background-color: #313538;}      
        #left-nav li{position: relative;}       
        #left-nav li a{display:block; height: 80px;font-size: 30px;text-align: center;color: #7E878C;}      
        #left-nav li a i{line-height: 80px;}        
        #left-nav li.active a{color: #f5f5f5;background: #464A4D;}              
        #left-content{float:left;width:305px;height: 600px;background-color: #ccc;}     
        #left-content ul li{height: 80px;border-bottom:1px solid #aaa; padding: 15px;color: #1F2427;cursor: pointer;}       
        #left-content ul li p{white-space: nowrap;overflow: hidden;text-overflow:ellipsis;width: 205px;}        
        #left-content ul li:hover{background-color: #DBDBDB;}      
        #left-content ul li.active{background-color: #eee;}             
        #chat-container{background: #eee;height: 530px;overflow-y: auto;}      
        #chat-container img{border: 3px solid #f9f9f9;box-shadow:1px 1px 3px #aaa;}    
        #chat-container ul li.you,#chat-container ul li.me{overflow:hidden;margin:10px 0;}     
        #chat-container .time-line{border-bottom: 1px solid #aaa;height: 10px;text-align: center;margin: 15px 15px 25px 15px;}      
        #chat-container .time-line span{padding: 0 25px;background: #eee;}             
        #chat-container .you img{float: left;margin-left: 10px;}       
        #chat-container .you .chat-info{float:left;background-color: #66CAFC;padding:15px;box-shadow:2px 2px 3px #aaa;margin:0 0 5px 20px;min-height: 45px;max-width: 300px;text-shadow: 1px 1px 2px #272727;color:#fff;}      
        #chat-container .you .chat-info:before{content: " ";width: 0;heigsht: 0;display: block;border: 8px solid #eee;border-right-color: #66CAFC;position: absolute;left: 79px;}
        #chat-container .you .chat-time{float:left;padding: 15px;color:#999}                
        #chat-container .me img{float: right;margin-right: 10px;}      
        #chat-container .me .chat-info{float:right;background-color: #49D270;padding:15px;box-shadow:2px 2px 3px #aaa;margin:0 20px 5px 0;min-height: 45px;max-width: 300px;text-shadow: 1px 1px 2px #272727;color:#fff;}       
        #chat-container .me .chat-info:before{content: " ";width: 0;heigsht: 0;display: block;border: 8px solid rgba(0,0,0,0);border-left-color: #49D270;position: absolute;right: 79px;}
        #chat-container .me .chat-time{float:right;padding: 15px;color:#999}                
        #send-msg{height: 69px;border-top: 1px solid #aaa;padding-top: 15px;}       
        #send-text{height: 40px;}       
        #send-btn{width: 98px;border-radius: 0;height: 40px;}


        /* padding */
        .nopd{padding: 0!important;}
        .prm{padding-right: 10px!important;}
        .prs{padding-right: 5px!important;}
        .prl{padding-right: 15px!important;}
        .prn{padding-right: 0!important;}
        .ptm{padding-top: 10px!important;}
        .pts{padding-top: 5px!important;}
        .ptl{padding-top: 15px!important;}
        .ptn{padding-top: 0!important;}
        .plm{padding-left: 10px!important;}
        .pls{padding-left: 5px!important;}
        .pll{padding-left: 15px!important;}
        .pln{padding-left: 0!important;}
        .pbm{padding-bottom: 10px!important;}
        .pbs{padding-bottom: 5px!important;}
        .pbl{padding-bottom: 15px!important;}
        .pbn{padding-bottom: 0!important;}

        /* margin */
        .nomg{margin:0}
        .mrm{margin-right: 10px!important;}
        .mrs{margin-right: 5px!important;}
        .mrl{margin-right: 15px!important;}
        .mrn{margin-right: 0!important;}
        .mtm{margin-top: 10px!important;}
        .mts{margin-top: 5px!important;}
        .mtl{margin-top: 15px!important;}
        .mtn{margin-top: 0!important;}
        .mlm{margin-left: 10px!important;}
        .mls{margin-left: 5px!important;}
        .mll{margin-left: 15px!important;}
        .mln{margin-left: 0!important;}
        .mbm{margin-bottom: 10px!important;}
        .mbs{margin-bottom: 5px!important;}
        .mbl{margin-bottom: 15px!important;}
        .mbn{margin-bottom: 0!important;}


    </style>
</head>
<body>
    <div class="row" id="message">
        <div class="col-xs-4 prn" id="left">
            <ul id="left-nav" class="list-unstyled">
                <li class="active last">
                    <a href="javascript:toggle('last');" title="最近"> <i class="glyphicon glyphicon-time"></i>
                    </a>
                    <span class="has-newmsg">1</span>
                </li>
                <li class="friends">
                    <a href="javascript:toggle('friends');" title="好友"> <i class="glyphicon glyphicon-user"></i>
                    </a>
                    <span class="has-newmsg">1</span>
                </li>
            </ul>
            <div id="left-content">
                <ul class="list-unstyled" id="last">
                    <li class="active">
                        <img class="circle pull-left" width="50" height="50" alt="" src="${portal_web_root}/themes/home/nuggets/images/100.jpg">
                        <div class="pull-left pll">
                            <h5 class="mtn">李昊</h5>
                            <p class="mbn">好吧，今天就到这里吧。</p>
                        </div>
                    </li>
                    <li>
                        <img class="circle pull-left" width="50" height="50" alt="" src="${portal_web_root}/themes/home/nuggets/images/limo.jpg">
                        <div class="pull-left pll">
                            <h5 class="mtn">limo</h5>
                            <p class="mbn">好的，谢谢你。</p>
                        </div>
                    </li>
                    <li>
                        <img class="circle pull-left" width="50" height="50" alt="" src="${portal_web_root}/themes/home/nuggets/images/dmm.jpg">
                        <div class="pull-left pll">
                            <h5 class="mtn">丁明梦</h5>
                            <p class="mbn">你个傻屌。</p>
                        </div>
                    </li>
                </ul>
                <ul class="list-unstyled" id="friends" >
                    <li class="active">
                        <img class="circle pull-left" width="50" height="50" alt="" src="${portal_web_root}/themes/home/nuggets/images/100.jpg">
                        <div class="pull-left pll">
                            <h5 class="mtn">李昊</h5>
                            <p class="mbn">好吧，今天就到这里吧。</p>
                        </div>
                    </li>
                    <li>
                        <img class="circle pull-left" width="50" height="50" alt="" src="${portal_web_root}/themes/home/nuggets/images/100.jpg">
                        <div class="pull-left pll">
                            <h5 class="mtn">李昊</h5>
                            <p class="mbn">好吧，今天就到这里吧。</p>
                        </div>
                    </li>
                    <li>
                        <img class="circle pull-left" width="50" height="50" alt="" src="${portal_web_root}/themes/home/nuggets/images/100.jpg">
                        <div class="pull-left pll">
                            <h5 class="mtn">李昊</h5>
                            <p class="mbn">好吧，今天就到这里吧。</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-xs-8" style="border: 1px solid #aaa;border-top: none;border-left: none;padding:0;">
            <div class="col-xs-12" id="chat-container">
                <ul class="list-unstyled">
                    
                </ul>
            </div>
            <div class="col-xs-12" id="send-msg">
                <button type="button" class="btn emotion">表情</button>
                <input type="text" id="send-text" class="col-xs-9" placeholder="您想说些什么...">
                <div class="btn-group dropup">
                    <button type="button" class="btn btn-success" id="send-btn" username="李昊" onclick="javascript:sendMsg()">发送</button>
                    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false"style="height: 40px;">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        <li>
                            <a href="javascript:sendMsg('你好，在吗？')">你好，在吗？</a>
                        </li>
                        <li>
                            <a href="javascript:sendMsg('好的！')">好的！</a>
                        </li>
                        <li>
                            <a href="javascript:sendMsg('谢谢！')">谢谢！</a>
                        </li>
                        <li>
                            <a href="javascript:sendMsg('能留下您的联系方式吗？')">能留下您的联系方式吗？</a>
                        </li>
                        <li>
                            <a href="javascript:sendMsg('再见。')">再见。</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="js/jquery.qqFace.js"></script>
    <script>
    var str=prompt("请输入您的姓名");
    if(str)
    {
        $("#send-btn").attr("username",str);
    }

     var iosocket = io.connect();
 
     var username = $("#send-btn").attr("username");
            iosocket.on('connect', function () {
                $('#chat-container ul').append($('<li class="time-line"><span>'+username+'连入</span></li>'));
 
                iosocket.on('message', function(message,user) {
                    //$('#incomingChatMessages').append($('<li></li>').text(user+":"+message));
                    var html = '<li class="you">'+
                        '<img class="circle" width="50" height="50" alt="" src="${portal_web_root}/themes/home/nuggets/images/100.jpg">'+
                        '<div class="chat-info">'+user+':'+ message +'</div>'+
                        '<div class="chat-time">'+ getCurrentTime() +'</div>'+
                    '</li>';
                    $('#chat-container ul').append(html);
                    scrollToLast();
                });
                iosocket.on('disconnect', function() {
                    $('#chat-container ul').append($('<li class="time-line"><span>'+username+'断开</span></li>'));
                });
            });
    </script>
    <script type="text/javascript"> 
        $(function() {
            $("#friends").hide();
            $("#left-content ul li").click(function() {
                $("#left-content ul li").removeClass("active");
                $(this).addClass("active");
            });

             $('.emotion').qqFace({ 
                assign:'saytext', //给输入框赋值 
                path:'arclist/'    //表情图片存放的路径 
            }); 
        });
        function toggle(el) {
            $("#left-nav li").removeClass("active");
            if (el == 'last') {
                $(".last").addClass("active");
                $(".last .has-newmsg").hide();
                $("#friends").slideUp(300);
                $("#last").slideDown(300);
            } else {
                $(".friends").addClass("active");
                $(".friends .has-newmsg").hide();
                $("#last").slideUp(300);
                $("#friends").slideDown(300);
            };
        }
        function getCurrentTime() {
            var date = new Date();
            var post_time = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); 
            return post_time;
        }
        function scrollToLast() {
            var container = $("#chat-container"),
            scrollTo = $("#chat-container ul li").last();
            container.animate({
                scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
            },
            500);
        }
        var lastPostTime = new Date().getTime();
        var timeout;
        

        function sendMsg(text) {
            clearTimeout(timeout);
            var currentTime = new Date().getTime();
            console.log(currentTime - lastPostTime);
            if ((currentTime - lastPostTime) > 1000) {
                lastPostTime = currentTime;
                if (text == null) {
                    var $text = $("#send-text").val();
                    if ($text == "") {
                        $("#send-text").tooltip({
                            title: '消息内容不能为空',
                            placement: 'top',
                            trigger: 'manual'
                        }); 
                        $("#send-text").tooltip("show");
                        timeout = setTimeout(function() {
                            $("#send-text").tooltip("destroy");
                        },2000);
                        return false;
                    }
                    var $time = getCurrentTime();
                    var $newMsg = '<li class="me">' + '<img class="circle" width="50" height="50" alt="" src="${portal_web_root}/themes/home/nuggets/images/me.jpg">' + '<div class="chat-info">' + $text + '</div>' + '<div class="chat-time">' + $time + '</div>' + '</li>';
                    $("#chat-container ul").append($newMsg);
                    iosocket.send($('#send-text').val(),$("#send-btn").attr("username"));
                    scrollToLast();
                } else {
                    var $time = getCurrentTime();
                    var $newMsg = '<li class="me">' + '<img class="circle" width="50" height="50" alt="" src="${portal_web_root}/themes/home/nuggets/images/me.jpg">' + '<div class="chat-info">' + text + '</div>' + '<div class="chat-time">' + $time + '</div>' + '</li>';
                    $("#chat-container ul").append($newMsg);
                    iosocket.send(text,$("#send-btn").attr("username"));
                    scrollToLast();
                }
                $("#send-text").val("");
            } else {
                $("#send-text").tooltip({
                    title: '消息发送过于频繁！',
                    placement: 'top',
                    trigger: 'manual'
                }) 
                $("#send-text").tooltip("show");
                timeout = setTimeout(function() {
                    $("#send-text").tooltip("destroy");
                },
                2000);
                return false;
            }
        }
    </script>
</body>
</html>